<template>
  <div class="rq">
    <van-row type="flex" justify="center">
      <van-col class="my_title" span="24">
        <div class="box_top">
          <div class="top_head"></div>
          <div class="top_text">
            <div class="text1">
              <div class="text_nicheng">春夏</div>
              <div class="img_xb"></div>
            </div>
            <div class="box_music">已听歌：4分钟</div>
            <div class="box_fk">昨天来过</div>
          </div>
        </div>
        <div class="box_buttom">
          <span>133关注</span>
          <span>2303粉丝</span>
          <span>1.4万 访客</span>
        </div>
      </van-col>
      <van-col class="menu" span='24'>
        <van-grid class="grid" :border="false">
          <van-grid-item icon="https://b.yzcdn.cn/vant/icon-demo-1126.png" text="喜欢" />
          <van-grid-item icon="https://b.yzcdn.cn/vant/icon-demo-1126.png" text="本地" />
          <van-grid-item icon="https://b.yzcdn.cn/vant/icon-demo-1126.png" text="歌单" />
          <van-grid-item icon="https://b.yzcdn.cn/vant/icon-demo-1126.png" text="已购" />
        </van-grid>
      </van-col>
      <!-- 最近播放 -->
      <van-col span='24'>
        <div class="box_col_title">
          <van-col class="col_title" span="9" tag='p'>最近播放</van-col>
          <van-col class="col_more" span="9">
            <span class="more_span1">更多 </span>
            <span class="more_span2">></span>
          </van-col>
        </div>
        <div class="box_container">
          <div class="c1"></div>
          <div class="c2"></div>
          <div class="c1_text">
            <div>江南</div>
            <div>林俊杰实力之作</div>
          </div>
          <div class="c2_text">
            <div>北京北京</div>
            <div>汪峰倾情献唱</div>
          </div>
        </div>
        <!-- 自建歌单 -->
        <div class="box_col_title">
          <van-col class="col_title" span="9" tag='p'>自建歌单</van-col>
          <van-col class="col_more" span="9">
            <span class="more_span1">更多 </span>
            <span class="more_span2">></span>
          </van-col>
        </div>
        <div class="box_container">
          <div class="c1"></div>
          <div class="create">+</div>
          <div class="c1_text">
            <div>歌单</div>
          </div>
          <div class="c2_text">
            <div>自建歌单</div>
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.my_title{
  width: 323px;
  height: 188px;
  background-color: #797979;
}
.box_top{
  width: 138px;
  height: 58px;
  /* background-color: antiquewhite; */
  margin-top: 55px;
  margin-left: 20px;
}
.top_head{
  width: 55px;
  height: 55px;
  transform:translateY(5%);
  border-radius: 50px;
  float: left;
  background-color: yellowgreen;
}
.top_text{
  width: 73px;
  height: 58px;
  float: left;
  margin-left: 10px;
  /* background-color: cadetblue; */
}
.text1{
  width: 73px;
  height: 20px;
  /* background-color: violet; */
}
.text_nicheng{
  width: 28px;
  height: 16px;
  float: left;
  font-size: 14px;
  color: #FFFFFF;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
}
.img_xb{
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 18px;
  /* background-color: aqua; */
}
.box_music{
  width: 73px;
  height: 12px;
  font-size: 11px;
  color: #CCCCCC;
  /* background-color: blueviolet; */
}
.box_fk{
  width: 44px;
  height: 12px;
  margin-top: 8px;
  font-size: 11px;
  color: #CCCCCC;
  /* background-color: thistle; */
}
.box_buttom{
  width: 185px;
  height: 15px;
  margin-top: 9px;
  margin-left: 20px;
  color: #FFFFFF;
  font-size: 13px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
}
.box_buttom span:nth-child(1){
  margin-right: 10px;
}
.box_buttom span:nth-child(2){
  margin-right: 11px;
}
/*  */
.menu{
  height: 91px;
  background-color: aquamarine;
}
.grid{
  height: 91px;
}
/*  */
.box_col_title{
  margin-left: 20px;
  height: 33px;
  margin-bottom: 17px;
}
.col_title{
  width: 236px;
  height: 16px;
  font-size: 14px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  /* background-color: rgba(0, 255, 255, 0.692); */
}
.col_more{
  width: 44px;
  height: 23px;
  margin-top: 12px;
  text-align: right;
  /* background-color: rgba(0, 255, 255, 0.493); */
}
.more_span1{
  font-size: 12px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
}
.more_span2{
  font-size: 20px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  line-height: 25px;
}
.box_container{
  height: 120px;
  /* background-color: aquamarine; */
}
.c1,.c2{
  width: 124px;
  height: 84px;
  float: left;
  border-radius: 8px;
  background-color: blue;
  background-image: url('https://img.imgdb.cn/item/606569ad8322e6675c92215b.png');
  background-size: 120%;
}
.c1{
  margin-left: 20px;
}
.c2{
  margin-left: 32px;
}
.c1_text,.c2_text{
  width: 82px;
  height: 32px;
  float: left;
  margin-top: 4px;
  /* background-color: aqua; */
}
.c1_text{
  margin-left: 37px;
}
.c2_text{
  margin-left: 74px;
}
.c1_text div:nth-child(1),.c2_text div:nth-child(1){
  font-size: 16px;
  text-align: center;
  font-family: 楷体;
  margin-bottom: 1px;
}
.c1_text div:nth-child(2),.c2_text div:nth-child(2){
  font-size: 11px;
  text-align: center;
  font-family: 楷体;
}
/*  */
.create{
  background-color: #F2F2F2;
  margin-left: 32px;
  width: 124px;
  height: 84px;
  float: left;
  border-radius: 8px;
  text-align: center;
  font-size: 48px;
  line-height: 80px;
}
</style>
